<!--
  - 访问文件夹
  - https://www.bilibili.com/video/BV14H4y117Lz/
 -->
 
<!-- 视图层 --><!-- 页头(上) -->
<template><header-comp />

<!-- TFjs初始化组件 -->
<tfjsInit />

<!-- 交互测试 -->
<uni-card title="交互测试">
  <!-- 通告栏 -->
  <uni-notice-bar text=
    "点击“运行代码”。"
  />

  <!-- 上传模型文件容器 -->
  <view class="center">
    <!-- 拓扑结构文件 -->
    <uni-file-picker
      class="center"
      :disabled="isGetModel || !tfBackendRef"
      :readonly="isGetModel"
      file-extname="json" fileMediatype="all"
      limit="1" return-type="object" :del-icon="false"
      :auto-upload="false" :disable-preview="true"
      @select="(event) => readModelFile(event.tempFiles[0].file)"
    >
      <!-- 文件上传按钮 -->
      <button size="mini" type="primary">
        读取拓扑文件
      </button>
    </uni-file-picker>
  </view>

  <!-- 训练按钮容器及按钮 -->
  <view class="center"><button
    :disabled="false"
    @click="testMain()"
    size="mini" type="primary"
  >
    打开文件夹
  </button></view>

  <view id="visor"></view>

  <!-- 打开图表板容器及按钮 -->
  <view class="center"><button
    @click="showVisor()"
    size="mini" type="primary"
  >
    打开图表板
  </button></view>

</uni-card>

<!-- 页脚(下) -->
<footer-comp /></template>

<!-- 逻辑层 -->
<script setup>
// 导入vue的onMounted、ref方法
import { shallowRef, ref } from "vue"
// 导入tfjs-visor库
import * as tf from "@tensorflow/tfjs"
import * as tfvis from "@tensorflow/tfjs-vis"
// 导入TF初始化组件
import tfjsInit from "../index/tfjs-init.vue"
// 导入xlsx库
// import * as XLSX from "xlsx"
// 导入公共方法库的方法
import {
  // tfjs计算后端挂载完毕的Ref对象
  tfBackendRef,
  // 显示图表板的方法
  showVisor,
  // 显示模型摘要的方法
  showModelSummary,
  // aoaTotfvisChart,
  // minToZero,
  // maxToOne
} from "../../scripts/app_common.js"
// 导入测试数据集
// import { exampleData } from "../../datasets/example-data.js"


/**
 * @ref对象
 */


/**
 * @其他对象
 */

// 主方法
async function testMain() {
  const path = "./static/model-1.json"
  const response = await fetch(path)
  const modelJson = await response.json()
  console.log(modelJson)
  const model = tf.model({
    inputs: modelJson.signature.inputs,
    outputs: modelJson.signature.outputs
  })

  showModelSummary(model)
  model.summary()
}

async function readModelFile(file) {
  console.log(file)
  // console.log(file.get())
  const model = await tf.loadLayersModel(file.cloudPath)
  // cloudPath

  model.summary()
}

</script>
